<template>
	<view class="Header">
		<view class="status_bar">
		        	<!-- //这里是状态栏 -->
		 </view>
		<view class=" cu-bar title padding-left ">
			<view class="back" @click="toback">
				<text class=" cuIcon-back backA"></text>
			</view>
			<view class="content text-bold ">
				<text>{{headername}}</text>
			</view>
			<view class="KF">
				<image src="" style="width: 44rpx;height: 44rpx;margin-right:32rpx ;" mode=""></image>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name:"Header",
		props:{
			headername:String
		},
		methods:{
			toback(){
				uni.navigateBack({
					
				})
			},
			GetStatusBarHeight() {
					let that = this;
					wx.getSystemInfo({
						success: function(res) {
							res.statusBarHeight; //这就是状态栏的高度
						},
					});
				},
		},
		onLoad() {
			this.GetStatusBarHeight();
		},
	}
</script>

<style lang="scss">
.status_bar {
        height: var(--status-bar-height);	//这里是状态栏css变量
        width: 100%;
    }
    .Header{
        width: 100%;
        background-color: rgba($color: #FFFFFF, $alpha: 0);
        position: fixed;
        top: 0rpx;
        z-index: 999;
    }
	
.title{
		width: 100%;
		height: 40px;

		display: flex;

	}
	
	.backA{
		font-size: 44rpx;
		color: black;
	}
	
	.KFIcon{
		font-size: 32rpx;
	}
	
	
	.title-text{
		width: 100%;
		text-align: center;
		line-height: 40px;
		font-weight:600;
		font-size: 36rpx;
		font-family: 苹方;
		color: #5D5D5D;
	}
	
	.KF{
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
	}
	
	.back{
		display: flex;
		align-items: center;
	}
</style>
